<template>
	<view class="box">
		<loading :status="loadStatus"></loading>
		<view class="form_ct_list " :class="{focus: focus.input1}">
			<input type="text" :placeholder="i18n.enterAccount" class="input" v-model="account"  @blur="focus.input1=false" @focus="focus.input1=true" />
		</view>
		<view class="form_ct_list " :class="{focus: focus.input2}">
			<input type="number" @blur="focus.input2=false" @focus="focus.input2=true" maxlength="6" :placeholder="i18n.enterCode" class="input" v-model="code">
			<val-code :step='step' @on-send='djs'></val-code>
		</view>
		<view class="plr30 mt-100">
			<button class="btn-block" :class="lock ? 'disabled' : ''" hover-class="btn-hover" type="primary" @tap="formSubmit">{{i18n.nextStep}}</button>
		</view>
	</view>
</template>

<script>
	import loading from '../../components/loading.vue'
	import valCode from '../../components/valCode.vue'
	export default {
		data() {
			return {
				account: '',
				pw: '',
				repw: "",
				code: '',
				type: 0,
				showTxt: '',
				lock: false,
				loadStatus: 'noMore',
				step: 1,
				focus: {
					input1: false,
					input2: false,
				}
			};
		},
		components: {
			loading, valCode
		},
		onShow() {
           uni.setNavigationBarTitle({
              title: this.$t('forget.forgetPass')
           }) 
		},
		computed: {
		    i18n() {
		    	return this.$t('forget');
		    },
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			//获取验证码 
			djs() {
				if (!this.account) {
					this.$toast(this.$t('forget.enterAccount'));
					return false;
				}
				let data = {
					account: this.account
				}
				this.step = 2;
				this.$post('api/sms/forget', data).then(res => {
					this.step = 3;
					this.$toast(res.msg);
				}).catch(res => {
					this.step = 1;
				})
			},
			formSubmit() {
				if (this.lock) return false;
				if (!this.account) {
					this.$toast(this.$t('forget.enterAccount'));
					return false;
				}
				if (!this.code) {
					this.$toast(this.$t('forget.enterCode'));
					return false;
				}
				if (this.code.length < 6) {
					this.$toast(this.$t('forget.sixCode'));
					return false;
				}
				var data = {
					account: this.account,
					code: this.code
				};
				this.lock = true;
				this.loadStatus = 'loading';
				this.$post("api/user/forget", data).then(res => {
					uni.setStorageSync('token', res.data.verify_token)
					uni.redirectTo({
						url: '/pages/login/reset'
					});
				}).finally(() => {
					this.lock = false;
					this.loadStatus = 'noMore';
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.box {
		overflow: hidden;
	}
	.return {
		position: absolute;
		/* #ifdef APP-PLUS */
		top: calc(30upx + var(--status-bar-height));
		/* #endif */
		/* #ifdef H5 */
		top: 30upx;
		/* #endif */
		left: 30upx;
		color: #263238;
		font-size: 40upx;
	}

	.form_ct_list {
		height: 96upx;
		// line-height: 96upx;
		position: relative;
		margin: 40upx 28upx 0upx 28upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid var(--border);
		transition: border-bottom-color .3s ease;
		&.focus {
			border-bottom-color: var(--theme-color)
		}
		.input {
			font-size: 30upx;
			flex: 1;
		}

		.text_yzm {
			display: block;
			line-height: 96upx;
			font-size: 30upx;
			color: var(--theme-color);
			position: absolute;
			right: 20upx;
			bottom: 0;
			z-index: 999;

			&.on {
				color: #333;
			}
		}

		.icon {
			width: 40upx;
			height: 40upx;
			margin-right: 16upx;
		}
		.icon_name {
			width: 42upx;
			height: 42upx;
			margin-right: 16upx;
		}
	}
</style>
